<template>
  <view v-if="!isLoading" class="container">
    <view class="goods-list">
      <view class="filter-box">
        <view class="f-item">全部</view>
        <view class="f-item" @click="salesSortChange">
          <text>销量</text>
          <view class="sort">
            <text :class="'yz-iconfont yz-jiantou4 '+(sales_sort=='asc'?'act':'')"></text>
            <text :class="'yz-iconfont yz-jiantou2 '+(sales_sort=='desc'?'act':'')"></text>
          </view>
        </view>
        <view class="f-item" @click="priceSortChange">
          <text>价格</text>
          <view class="sort">
            <text :class="'yz-iconfont yz-jiantou4 '+(price_sort=='asc'?'act':'')"></text>
            <text :class="'yz-iconfont yz-jiantou2 '+(price_sort=='desc'?'act':'')"></text>
          </view>
        </view>
      </view>
      <view class="item" v-for="(item,index) in goodsList" :key="index">
        <xy-goods-row :item="item"/>
      </view>
      <view v-if="!isLoading && isEmpty">
        <xy-empty :text="'暂无商品'"/>
      </view>
    </view>

    <xy-tabbar />
  </view>
</template>

<script>
import {mapState, mapActions} from 'vuex';
import xyGoodsRow from "@/components/xy-goods/row.vue";
import xyEmpty from "@/components/xy-empty/index.vue";
import xyTabbar from "@/components/xy-tabbar/index.vue";

export default {
  components: {
    xyTabbar,
    xyEmpty, xyGoodsRow,
  },
  data() {
    return {
      isEmpty: true,
      currentPage: 1,
      keyword: '',
      sales_sort: '',
      price_sort: '',
      //这里最多能支持2级分类
      goodsList: [],
      isLoading: true,
      scrollTop: 0,
      lastPage: 1,
      loadStatus: 'loadmore',
    }
  },
  computed: {
    ...mapState(['common', 'user'])
  },
  async onLoad(options) {
    let query = this.$Route.query;
    if (query?.keyword) {
      this.keyword = query.keyword;
    }
    if (query?.cid) {
      this.cid = query.cid;
    }
    this.getGoodsList();
  },
  onPullDownRefresh() {
  },
  methods: {

    priceSortChange() {
      if (this.price_sort == '') {
        this.price_sort = 'desc';
      } else if (this.price_sort == 'desc') {
        this.price_sort = 'asc';
      } else {
        this.price_sort = '';
      }
      this.sales_sort = '';
      this.currentPage = 1;
      this.goodsList = [];
      this.getGoodsList();
    },

    salesSortChange() {
      if (this.sales_sort == '') {
        this.sales_sort = 'desc';
      } else if (this.sales_sort == 'desc') {
        this.sales_sort = 'asc';
      } else {
        this.sales_sort = '';
      }
      this.price_sort = '';
      this.currentPage = 1;
      this.goodsList = [];
      this.getGoodsList();
    },

    onPullDownRefresh() {
      this.currentPage = 1;
      this.logList = [];
      this.getGoodsList();
    },
    onReachBottom() {
      if(this.currentPage < this.lastPage) {
        this.currentPage += 1;
        this.getGoodsList();
      }
    },

    // 产品列表
    getGoodsList: function () {
      var that = this;

      this.$api.post({
        url: '/goods/lists',
        loadingTip: '加载中...',
        data: {
          search: that.keyword,
          sales_sort: that.sales_sort,
          price_sort: that.price_sort,
          page: that.currentPage,
          category_id: that.cid,
          store_id: uni.getStorageSync('store_id')
        },
        success: res => {

          this.goodsList = [...this.goodsList, ...res.data];
          this.isEmpty = !this.goodsList.length;
          this.isLoading = false;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';

        }
      });

    },

    search() {
      this.currentPage = 1;
      this.goodsList = [];
      this.getGoodsList();
    }
  }
}
</script>

<style>
page {
  background: #e5e5e5;
  overflow: hidden;
}
</style>
<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.goods-list {
  background: #fff;
  .item {
    background: #fff;
  }
}

.filter-box {
  display: flex;
  border-bottom: 1rpx solid #e5e5e5;
  margin-bottom: 20rpx;

  .f-item {
    position: relative;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 24rpx;
    text-align: center;
    flex-grow: 1;
    border-right: 1rpx solid #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;

    .yz-iconfont {
      margin-left: 10rpx;
      line-height: 24rpx;
      font-size: 18rpx;
      color: #e5e5e5;

      &.act {
        color: #999999;
      }
    }

    .sort {
      display: flex;
      flex-direction: column;
      margin-left: 10rpx;
    }
  }
}

</style>
